<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>白蚁图片检测系统</title>
    <style>
        body {
            height: 98vh;
            width: 98vw;
            position: relative;
            background-image: url('../static/img.png');
        }
        .title{
            height: 10vh;
            width: 30vw;
            position: absolute;
            top:5vh;
            left: 34vw;
            text-align: center;
            font-size: 50px;
            font-weight: bold;
            color: white;
         }
        .project {
            height: 60vh;
            width: 90vw;
            position: absolute;
            top:19vh;
            left: 4vw;
        }
        .item{
            height: 40vh;
            width: 60vh;
            position: absolute;
            left: 3vh;
            border:solid 2px white;
        }
        .result{
            height: 40vh;
            width: 60vh;
            position: absolute;
            right: 3vh;
            border:solid 2px white;
        }
        .icon{
            height: 10vh;
            width: 25vh;
            position: absolute;
            top:15vh;
            left: 70vh;
            font-weight: bold;
            font-size: 50px;
            text-align: center;
            font-family: '黑体';
            color: white;
        }
        .choose{
            display: block;
            position: absolute;
            bottom: 10vh;
            left:43vw;
        }
        .detect{
            display: block;
            position: absolute;
            bottom: 5vh;
            left:43vw;
        }
        .choose_img{
            height: 40vh;
            width: 60vh;
            display: none;
        }
        .result_img{
            height: 40vh;
            width: 60vh;
            display: none;
        }
    </style>
</head>
<body>
    <div class="title">白蚁图片检测系统</div>
    <div class="project">
        <div class="item">
            <img class="choose_img" src="" alt="">
        </div>
        <div class="icon">——></div>
        <input class="choose" type="file" id="fileInput" accept="image/*" onchange="displayImage()">
        <button class="detect" onclick="uploadFile()">开始检测</button>
        <div class="result">
            <img class="result_img" id="uploadedImage" src="" alt="Uploaded Image">
        </div>
    </div>

    <script>
        function displayImage() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];
            const item=document.querySelector('.item').children[0];
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
              item.src = e.target.result;
              item.style.display='block';
            };
        }
        function uploadFile() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];

            if (!file) {
                alert('请选择文件');
                return;
            }

            const formData = new FormData();
            formData.append('file', file);

            fetch('/', {
                method: 'POST',
                body: formData,
            })
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
                const imgElement = document.getElementById('uploadedImage');
                imgElement.src = `data:image/jpeg;base64,${data.img_stream}`;
                imgElement.style.display = 'block';
                alert('检测成功');
            })
            .catch(error => {
                console.error('Error:', error);
                alert('检测失败');
            });
        }
    </script>
</body>
</html>
